<template>
  <page-container :title="route.meta.title">
    <SearchTable
      ref="tableRef"
      :table-list-api="tableListApi"
      :columns="columns"
      :convert-from-response="res => res.data"
    ></SearchTable>
  </page-container>
</template>

<script setup lang="tsx">
import { useRoute } from 'vue-router';
import SearchTable from '@/components/SearchTable';
import type { IColumn, IOption } from '@/types';
import request from '@/utils/request';

const route = useRoute();
const tableListApi = '/v1/addata/list';
const mediaOptions = ref<IOption[]>([]);
const columns = computed<IColumn[]>(() => [
  {
    title: '媒体方', //必填
    width: 80,
    dataIndex: 'media_id',
    type: 'enum',
    required: true,
    searchable: true,
    options: mediaOptions.value,
    customRender: ({ record }) => {
      const found = mediaOptions.value.find(option => option.value === record.media_id);
      return found?.label || '';
    },
  },
  {
    title: '日期',
    dataIndex: 'date',
    type: 'date',
  },
  {
    title: '应用',
    dataIndex: 'app_name',
  },
  {
    title: '广告位',
    dataIndex: 'ad_site_name',
  },
  {
    title: '广告位id',
    dataIndex: 'ad_site_id',
  },
  {
    title: '第三方平台',
    dataIndex: 'ad_owner',
    searchable: true,
  },
  {
    title: '广告图片url',
    dataIndex: 'ad_url',
    customRender({ text }) {
      // 使用 a 标签包裹 text，点击时在新标签页中打开图片
      return (
        <a href={text} target="_blank">
          查看图片
        </a>
      );
    },
  },
  {
    title: '广告跳转地址',
    dataIndex: 'status',
  },
  {
    title: '竞价时间',
    dataIndex: 'created_at',
  },
  {
    title: '出价',
    dataIndex: 'price',
  },
  {
    title: '竞价结果',
    dataIndex: 'win',
  },

  // {
  //   title: '操作',
  //   dataIndex: 'updatedAt',
  //   // sorter: true,
  // },
]);
const setMediaOptions = async () => {
  const data = await request.get('/v1/media/list', { params: { page: 1, page_size: 100 } });
  // @ts-ignore
  mediaOptions.value = data.data.list.map(({ id, name }) => ({ label: name, value: id }));
};
setMediaOptions();
</script>
